<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MQTT 在线聊天室</title>
    <link rel="stylesheet" href="style.css" />
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="container">
      <!-- 登录界面 -->
      <div id="login-screen" class="screen active">
        <div class="login-card">
          <div class="login-header">
            <i class="fas fa-comments"></i>
            <h1>MQTT 聊天室</h1>
            <p>欢迎来到基于MQTT的实时聊天室</p>
          </div>
          <form id="login-form" class="login-form">
            <div class="input-group">
              <label for="username">用户名</label>
              <input
                type="text"
                id="username"
                name="username"
                required
                placeholder="请输入您的用户名"
              />
            </div>
            <div class="input-group">
              <label for="room">聊天室</label>
              <select id="room" name="room" required>
                <option value="">选择聊天室</option>
                <option value="general">💬 综合讨论</option>
                <option value="tech">💻 技术交流</option>
                <option value="random">🎲 随机聊天</option>
                <option value="gaming">🎮 游戏讨论</option>
              </select>
            </div>
            <button type="submit" class="login-btn">
              <i class="fas fa-sign-in-alt"></i>
              进入聊天室
            </button>
          </form>
        </div>
      </div>

      <!-- 聊天界面 -->
      <div id="chat-screen" class="screen">
        <div class="chat-container">
          <!-- 头部 -->
          <header class="chat-header">
            <div class="room-info">
              <h2 id="current-room">💬 综合讨论</h2>
              <span id="connection-status" class="status connected">
                <i class="fas fa-circle"></i> 已连接
              </span>
            </div>
            <div class="header-actions">
              <button id="toggle-users" class="btn-icon" title="切换用户列表">
                <i class="fas fa-users"></i>
              </button>
              <button id="leave-room" class="btn-icon" title="离开聊天室">
                <i class="fas fa-sign-out-alt"></i>
              </button>
            </div>
          </header>

          <div class="chat-main">
            <!-- 消息区域 -->
            <div class="messages-container">
              <div id="messages" class="messages">
                <!-- 消息会动态添加到这里 -->
              </div>
              <div id="typing-indicator" class="typing-indicator">
                <!-- 输入指示器 -->
              </div>
            </div>

            <!-- 在线用户列表 -->
            <aside id="users-sidebar" class="users-sidebar">
              <div class="users-header">
                <h3><i class="fas fa-users"></i> 在线用户</h3>
                <span id="user-count" class="user-count">0</span>
              </div>
              <div id="users-list" class="users-list">
                <!-- 用户列表会动态添加到这里 -->
              </div>
            </aside>
          </div>

          <!-- 消息输入区 -->
          <div class="message-input-container">
            <form id="message-form" class="message-form">
              <div class="input-wrapper">
                <input
                  type="text"
                  id="message-input"
                  placeholder="输入消息..."
                  autocomplete="off"
                  disabled
                />
                <button type="submit" id="send-btn" disabled>
                  <i class="fas fa-paper-plane"></i>
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>

    <!-- 通知容器 -->
    <div id="notifications" class="notifications"></div>

    <!-- JavaScript -->
    <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>
